<template>
  <div class="page-user-detail">
    <ul class="tab-list">
      <li class="tab" @click="changeType(0)" :class="{active: type === 0}">基本信息</li>
      <li class="tab" @click="changeType(1)" :class="{active: type === 1}">父母信息</li>
      <li class="tab" @click="changeType(2)" :class="{active: type === 2}">订单信息</li>
      <li class="tab" @click="changeType(3)" :class="{active: type === 3}">备注信息</li>
    </ul>
    <swiper class="content-list" :current="type" @change="changeSwiper">
      <swiper-item>
          <div class="info">
            <div class="title">姓名:</div>
            <div class="value">{{userInfo.realName}}</div>
          </div>
          <div class="info">
            <div class="title">手机号码:</div>
            <div class="value">{{userInfo.mobile}}</div>
          </div>
          <div class="info">
            <div class="title">微信号:</div>
            <div class="value">{{userInfo.wechatNo}}</div>
          </div>
          <div class="info">
            <div class="title">QQ号:</div>
            <div class="value">{{userInfo.qqNo}}</div>
          </div>
          <div class="info">
            <div class="title">身高:</div>
            <div class="value">{{userInfo.height}}cm</div>
          </div>
          <div class="info">
            <div class="title">期望身高:</div>
            <div class="value">{{userInfo.expectHeight ?  userInfo.expectHeight + 'cm' : '无'}}</div>
          </div>
          <div class="info">
            <div class="title">体重:</div>
            <div class="value">{{userInfo.weight ? userInfo.weight + 'kg' : '无'}}</div>
          </div>
          <div class="info">
            <div class="title">BMI:</div>
            <div class="value">{{userInfo.bmi}}</div>
          </div>
          <div class="info">
            <div class="title">出生日期:</div>
            <div class="value" v-if="userInfo.bornYear">
              {{userInfo.bornYear + "年" + userInfo.bornMonth + "月" + userInfo.bornDate + "日"}}
            </div>
            <div class="value" v-else>
              无
            </div>
          </div>
          <div class="info">
            <div class="title block">联系地址:</div>
            <div class="value">{{userInfo.abroadAddress == 0 ?
              (userInfo.provinceName+userInfo.cityName+userInfo.areaName+userInfo.address) : userInfo.address }}
            </div>
          </div>
      </swiper-item>
      <swiper-item>
        <div class="module-title">
          <div class="line"></div>
          <span class="title">父亲信息</span>
          <div class="line"></div>
        </div>
        <div class="info">
          <div class="title">姓名:</div>
          <div class="value">{{userInfo.fatherName}}</div>
        </div>
        <div class="info">
          <div class="title">手机号码:</div>
          <div class="value">{{userInfo.fatherMobile}}</div>
        </div>
        <div class="info">
          <div class="title">身高:</div>
          <div class="value">{{userInfo.fatherHeight ? userInfo.fatherHeight + 'cm' : '无'}}</div>
        </div>
        <div class="info">
          <div class="title">出生日期:</div>
          <div class="value" v-if="userInfo.fatherBornYear">{{userInfo.fatherBornYear + '年' + userInfo.fatherBornMonth + '月' +  userInfo.fatherBornDate + '日'}}</div>
          <div class="value" v-else>
            无
          </div>
        </div>
        <div class="line"></div>
        <div class="module-title">
          <div class="line"></div>
          <span class="title">母亲信息</span>
          <div class="line"></div>
        </div>
        <div class="info">
          <div class="title">姓名:</div>
          <div class="value">{{userInfo.motherName}}</div>
        </div>
        <div class="info">
          <div class="title">手机号码:</div>
          <div class="value">{{userInfo.motherMobile}}</div>
        </div>
        <div class="info">
          <div class="title">身高:</div>
          <div class="value">{{userInfo.motherHeight ? userInfo.motherHeight + 'cm' : '无'}}</div>
        </div>
        <div class="info">
          <div class="title">出生日期:</div>
          <div class="value" v-if="userInfo.motherBornYear">{{userInfo.motherBornYear + '年' + userInfo.motherBornMonth + '月' +  userInfo.motherBornDate + '日'}}</div>
          <div class="value" v-else>
            无
          </div>
        </div>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y class="content">
          <div class="order-wrap" v-for="(data,index) in orderList" :key="index">
            <div class="order-no">
              订单号:{{data.orderNo}}
              <div class="order-status">{{data.orderStatus}}</div>
            </div>
            <div class="goods-name">{{data.serviceGoodsName}}</div>
            <ul class="info-list">
              <li class="info">
                <div class="title">录单人员:</div>
                <div class="value">{{data.saleUserName}}</div>
              </li>
              <li class="info">
                <div class="title">服务老师:</div>
                <div class="value">{{data.servicerName}}</div>
              </li>
              <li class="info">
                <div class="title">订单总额:</div>
                <div class="value">{{data.orderAmount}}</div>
              </li>
              <li class="info">
                <div class="title">下单渠道:</div>
                <div class="value">{{data.regChannelName}}</div>
              </li>
              <li class="info block">
                <div class="title">支付状态:</div>
                <div class="value">{{data.payStatus}}</div>
              </li>
              <li class="info block">
                <div class="title">下单时间:</div>
                <div class="value">{{data.ctime}}</div>
              </li>
            </ul>
          </div>
        </scroll-view>
      </swiper-item>
    </swiper>
    <div class="btn-footer">
      <div class="btn" @click="remove">删除</div>
      <div class="btn" @click="toEdit">修改</div>
    </div>
  </div>
</template>

<script>
  import orderStatus from 'utils/order-status'
  import payStatus from 'utils/pay-status'

  export default {
    data() {
      return {
        userInfo: {},
        orderList: [],
        type: 0,
      };
    },
    components: {},
    methods: {
      async remove(){
        wx.showLoading('正在提交...');
        const result = await wx.request({
          url: `/bg/userInfo/delete/${this.id}`,
        });
        wx.hideLoading();
        if (result.code === 200) {
          wx.showModal({
            content: '删除成功',
            showCancel: false,
            success: result => {
              if(result.confirm){
                wx.navigateBack();
              }
            }
          });
        }else{
          wx.showToast(result.message)
        }
      },
      toEdit(){
        wx.navigateTo({
          url: '/pages/add-user/main?id='+this.id
        })
      },
      changeSwiper(e){
        this.type = e.mp.detail.current;
      },
      changeType(type){
        this.type = type;
      },
      async loadOrder(){
        const result = await wx.request({
          url: '/bg/order/listPage',
          data: {
            page: 1,
            pageSize: 50,
            userId: this.userInfo.userId
          }
        });
        if (result.code === 200) {
          const list = [];
          result.data.rows.forEach(data => {
            const finalData = _.pick(data, ['orderNo', 'serviceGoodsName', 'servicerName', 'regChannelName', 'saleUserName', 'orderAmount', 'orderStatus', 'payStatus', 'ctime']);
            finalData.orderStatus = orderStatus(finalData.orderStatus);
            finalData.payStatus = payStatus(finalData.payStatus);
            list.push(finalData)
          })
          this.orderList = list;
        } else {
          wx.showToast(result.message);
        }
      },
      async loadData() {
        wx.showLoading();
        const result = await wx.request({
          url: `/bg/userInfo/detail/${this.id}`
        });
        wx.hideLoading();
        if (result.code === 200) {
          this.userInfo = result.data;
          this.loadOrder();
        } else {
          wx.showToast(result.message);
        }
      }
    },
    async mounted() {
      this.id = this.$root.$mp.query.id;
      this.loadData();
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";

  .page-user-detail {
    .tab-list {
      @include middle-center-x();
      top: 0;
      width: pxToRem(750);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow:0 pxToRem(4) pxToRem(6) 0 rgba(204,204,204,0.5);
      z-index: 1000;
      .tab {
        flex: 1;
        padding-top: pxToRem(22);
        padding-bottom: pxToRem(22);
        color: #707070;
        font-size: pxToRem(32);
        line-height: pxToRem(44);
        text-align: center;
        &.active {
          color: #44BDF5;
        }
      }
    }
    .content-list {
      height: 100vh;
      padding-top: pxToRem(88);
      .content {
        height: 100vh;
        background-color: #F5F5F5;
      }
    }
    .module-title {
      display: flex;
      align-items: center;
      padding-top: pxToRem(20);
      padding-left: pxToRem(20);
      padding-bottom: pxToRem(30);
      background-color: #fff;
      .title {
        font-size: pxToRem(36);
        margin-left: pxToRem(10);
        margin-right: pxToRem(10);
      }
      .line {
        width: pxToRem(20);
        height: pxToRem(4);
        background: linear-gradient(90deg, rgba(117, 228, 252, 1) 0%, rgba(68, 189, 245, 1) 100%);
      }
    }
    .info {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-left: pxToRem(30);
      font-size: pxToRem(28);
      line-height: pxToRem(40);
      padding-bottom: pxToRem(20);
      background-color: #fff;
      .title {
        margin-right: pxToRem(10);
        color: #707070;
        &.block {
          margin-bottom: pxToRem(10);
          width: 100%;
        }
      }
      .value {
        color: #000;
        margin-right: pxToRem(30);
      }
    }
  }
  .order-wrap {
    margin-bottom: pxToRem(20);
    background-color: #fff;
    padding-left: pxToRem(30);
    padding-right: pxToRem(30);
    .order-no {
      position: relative;
      padding-top: pxToRem(30);
      padding-bottom: pxToRem(20);
      border-bottom: pxToRem(1) solid rgba(68,189,245,0.3);
      font-size: pxToRem(26);
      color: #707070;
      background-color: #fff;
      .order-status {
        position: absolute;
        right: 0;
        top: pxToRem(30);
        color: #FF6550;
      }
    }
    .goods-name {
      padding-top: pxToRem(30);
      padding-bottom: pxToRem(20);
      font-size: pxToRem(28);
      line-height: pxToRem(40);
      @include multi-ellipsis();
    }
  }
  .info-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .info {
      width: pxToRem(345);
      padding-left: 0;
      &.block {
        width: pxToRem(690);
      }
    }
  }
  .line {
    height: pxToRem(20);
    background-color: #F5F5F5;
  }
  .btn-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    @include middle-center-x();
    bottom: 0;
    width: pxToRem(750);
    padding: pxToRem(20) pxToRem(50);
    .btn {
      width: pxToRem(300);
      color: #44BDF5;
      height: pxToRem(88);
      line-height: pxToRem(88);
      text-align: center;
      border: pxToRem(1) solid #44BDF5;
      border-radius: pxToRem(8);
    }
  }
</style>
